<template>
    <div class="news">
    <ul>
        <li  v-for="item in newsList" :key="item.id">
            <!-- 第一种写法 -->
            <!-- <RouterLink :to="`/news/newsconten?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</RouterLink> -->
       
            <!-- 第二种写法 -->
       <RouterLink :to="{
    // path: '/news/newsconten',
    name: 'xwlb',
    query: {
        id: item.id,
        title: item.title,
        content:item.content
        }
       }"
       >
       {{item.title }}
       </RouterLink>
        </li>
    </ul>
    <div class="newsconten">
        <RouterView></RouterView>
    </div>
</div>
    
       
   </template>
   
   <script lang="ts" setup>
   import { reactive } from 'vue';
   import { RouterView,RouterLink } from 'vue-router';

 const newsList = reactive([
    {id:'xw1',title:'新闻报道01',content:'报道1'},
    {id:'xw2',title:'新闻报道02',content:'报道2'},
    {id:'xw3',title:'新闻报道03',content:'报道3'},
    {id:'xw4',title:'新闻报道04',content:'报道4'},
   ])
   </script>
   
   <style scoped>
   .news{
    display: flex;
    height: 100%;

    li{
        list-style: none;
        margin: 20px;
      a{
       color: black; 
       text-decoration: none;
    }

    }
    .newsconten{
        width: 60%;
        border: 1px solid #333;
        margin: 16px;
        box-sizing: border-box;
        border-radius: 10px;
    }
}
   </style>